<template>
  <view class="containter">
    <view class="warpper">
      <view class="block" style="padding: 0 30rpx 20rpx 30rpx;">
        <view class="ht">
          <text class="title">客户信息</text>
          <text class="edit" @click="toOrderEditPage" v-if="orderInfo.is_follow == 1">编辑</text>
        </view>
        <view class="hb">
          <view class="hb-item">
            <view class="label">客户姓名：</view>
            <view class="value">{{orderInfo.connect_name}}</view>
          </view>
          <view class="hb-item">
            <view class="label">联系类型1：</view>
            <view class="value">{{connectType[orderInfo.connect_type]}}</view>
          </view>
          <view class="hb-item">
            <view class="label">联系方式1：</view>
            <view class="value">
              <text class="phoneNum">{{orderInfo.connect_information}}</text>
              <image class="copyTxt" @click="copyText(orderInfo.connect_information)" src="../../static/images/copy.png"
                mode=""></image>
              <image class="phoneIcon" v-if="orderInfo.connect_type == 1" @click="callPhone(orderInfo.connect_information)"
                src="../../static/images/dianhua.png" mode=""></image>
            </view>
          </view>
          <block v-if="orderInfo.connect_type_two">
            <view class="hb-item">
            	<view class="label">联系类型2：</view>
            	<view class="value">{{connectType[orderInfo.connect_type_two]}}</view>
            </view>
            <view class="hb-item">
            	<view class="label">联系方式2：</view>
            	<view class="value">
            		<text class="phoneNum">{{orderInfo.connect_information_two}}</text>
            		<image class="copyTxt" @click="copyText(orderInfo.connect_information_two)"
            			src="../../static/images/copy.png" mode=""></image>
            		<image class="phoneIcon" v-if="orderInfo.connect_type_two == 1" @click="callPhone(orderInfo.connect_information_two)"
            			src="../../static/images/dianhua.png" mode=""></image>
            	</view>
            </view>
          </block>
          <view class="hb-item">
            <view class="label">派单人：</view>
            <view class="value">{{orderInfo.dispatch_username}}</view>
          </view>
          <view class="hb-item">
            <view class="label">客户来源：</view>
            <view class="value">{{orderInfo.dispatch_area_name}}</view>
          </view>
          <view class="hb-item">
            <view class="label">派单时间：</view>
            <view class="value">{{orderInfo.created_at}}</view>
          </view>
          <view class="hb-item">
          	<view class="label">接单地区：</view>
          	<view class="value">{{orderInfo.receive_area_name?orderInfo.receive_area_name:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">接单人：</view>
            <view class="value">{{orderInfo.receive_username?orderInfo.receive_username:"暂无"}}</view>
          </view>
          <!--          <view class="hb-item">
            <view class="label">转派：</view>
            <view class="hb-item-fr">
              <text class="tttx1">请选择</text>
              <image class="arrowIcon" src="../../static/images/arrow.png" mode=""></image>
            </view>
          </view> -->
          <view class="hb-item">
            <view class="label">接单时间：</view>
            <view class="value">{{orderInfo.receive_at?orderInfo.receive_at:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">跟进时间：</view>
            <view class="value">{{orderInfo.updated_at}}</view>
          </view>
          <view class="hb-item">
            <view class="label">客户等级：</view>
            <view class="value">{{orderInfo.customer_level?orderInfo.customer_level:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">项目类型：</view>
            <view class="value">{{orderInfo.item_type?orderInfo.item_type:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">跟进内容：</view>
            <view class="value">{{orderInfo.last_follow_content?orderInfo.last_follow_content:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">备注：</view>
            <view class="value">{{orderInfo.source_remark?orderInfo.source_remark:'暂无'}}</view>
          </view>
          <view class="hb-item">
            <view class="label">图 片：</view>
            <view class="value images" v-if="orderInfo.source_images && orderInfo.source_images.length>0">
              <image class="img-item" v-for="(item, index) in orderInfo.source_images" @click="clickImg(item)"
                :src="item" mode=""></image>
            </view>
            <view v-else>暂无</view>
          </view>
        </view>
      </view>
      <view style="width: 100%;height: 30rpx;"></view>
      <view class="block">
        <view class="ht">
          <text class="title">活动记录</text>
        </view>
        <view class="activityInfo-warp">
          <uv-steps current="0" direction="column" v-if="orderInfo.follow && orderInfo.follow.length>0">
            <uv-steps-item v-for="(item, index) in orderInfo.follow" :key="index">
              <template v-slot:icon>
                <image class="stepIcon" src="../../static/images/step.png" mode=""></image>
              </template>
              <template v-slot:title>
                <view class="step-title">
                  <text class="stepName">{{item.username}}</text>
                  <text class="stepTime">{{item.created_at}}</text>
                </view>
              </template>
              <template v-slot:desc>
                <view class="stepContent">{{item.content}}</view>
                <view class="stepImgs">
                  <image class="img" @click="clickImg(item2)" :src="item2" mode=""
                    v-for="(item2, index2) in item.images" :key="index2">
                  </image>
                </view>
              </template>
            </uv-steps-item>
          </uv-steps>
          <uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
        </view>
      </view>
      <view style="width: 100%;height: 30rpx;"></view>
      <view class="block">
        <view class="ht">
          <text class="title">操作记录</text>
        </view>
        <view class="activityInfo-warp">
          <uv-steps current="0" direction="column" v-if="orderInfo.clue_status && orderInfo.clue_status.length>0">
            <uv-steps-item v-for="(item, index) in orderInfo.clue_status" :key="index">
              <template v-slot:icon>
                <image class="stepIcon" src="../../static/images/step.png" mode=""></image>
              </template>
              <template v-slot:title>
                <view class="step-title">
                  <text class="stepName">{{item.name}}</text>
                  <text class="stepTime">{{item.created_at}}</text>
                </view>
              </template>
              <template v-slot:desc>
                <view class="stepContent">{{item.change_message}}</view>

              </template>
            </uv-steps-item>
          </uv-steps>
          <uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 168rpx;"></view>
    <view class="footer">
      <view class="btns">
        <view class="btn3" style="margin-right: 20rpx;" @click="openPicker" v-if="orderInfo.is_follow == 1">
          <image class="transfer-icon" src="../../static/images/zhuanpai.png" mode=""></image>
          <text class="transfer-txt">转派</text>
        </view>
        <!-- v-if="orderInfo.is_follow == 1 && isFlag" -->
        <view class="btn1" @click="handleJoin">放入公海</view>
        <view class="btn" @click="jiedan" v-if="orderInfo.is_follow == 0">
          确认接单
        </view>
        <view class="btn2" v-if="orderInfo.is_follow == 1" @click="toRecordPage">
          <image class="icon" src="../../static/images/tianxie.png" mode=""></image>
          <text class="txt">填写跟进记录</text>
        </view>
      </view>

    </view>

    <uv-modal ref="modal" title="确认接单吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
    <uv-modal ref="modal2" title="确认加入公海吗？" :showCancelButton="true" @confirm="confirm2"></uv-modal>
    <uv-picker ref="picker" :columns="transferList" keyName="name" @confirm="transferConfirm"></uv-picker>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        orderInfo: {
          source_remark: ""
        },
        transferList: [],
        connectType: {
          1: "电话",
          2: "微信",
          3: "QQ",
          4: "其他"
        },
        sourceType: {
          1: "淘宝",
          2: "百度",
          3: "自拓",
          4: "其他"
        },
        oId: "",
        transferParams: {
          id: "",
          transfer_uid: ""
        }
      }
    },
    computed: {
      isFlag() {
        console.log("当前年月", tools.getCurrentDate());
        if (this.orderInfo.created_at && this.orderInfo.created_at.includes(tools.getCurrentDate())) {
          return true
        } else {
          return false
        }
      }
    },
    onLoad(option) {
      this.oId = option.id;
      this.getDetail(option.id);
    },
    onShow() {
      uni.$on("refreshPage", this.getDetail(this.oId));
    },
    methods: {
      transferConfirm(e) {
        console.log('confirm', e);
        const {
          id
        } = e.value[0];
        this.transferParams.transfer_uid = id;
        reqApi.bindTransfer(this.transferParams).then(res => {
          uni.showToast({
            title: "转派成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1500)
        })
      },
      openPicker() {
        this.$refs.picker.open();
      },
      // 商务列表
      getList() {
        reqApi.sellerList({}).then(res => {
          this.transferList = [res.data];
          console.log("转派人员", this.transferList);
        })
      },
      toOrderEditPage() {
        uni.navigateTo({
          url: `/pages/order/orderEdit?id=${this.orderInfo.id}`
        })
      },
      getDetail(id) {
        reqApi.orderDetail({
          id
        }).then(res => {
          console.log("订单详情", res);
          this.orderInfo = res.data;
          this.transferParams.id = res.data.id;
          if (res.data.is_follow == 1) {
            this.getList();
          }
        })
      },
      toRecordPage() {
        uni.navigateTo({
          url: `/pages/order/addRecord?id=${this.orderInfo.id}`
        })
      },
      handleJoin() {
        this.$refs.modal2.open();
      },
      jiedan() {
        // this.$refs.modal.open();
        reqApi.takeOrder({
          id: this.orderInfo.id
        }).then(res => {
          uni.showToast({
            title: "接单成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          let _this = this;
          uni.requestSubscribeMessage({
            tmplIds: ['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'],
            success(res) {
              console.log("是否授权", res);
              if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] ==
                "accept") { // 用户点击确定后
                _this.getDetail(_this.orderInfo.id);
              }
              if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] ==
                "reject") { // 用户点击确定后
                uni.showToast({
                  title: "拒绝订阅消息",
                  icon: 'none',
                  mask: true,
                  duration: 1000,
                })
              }
            }
          })

        })
      },
      confirm2() {
        reqApi.joinSea({
          id: this.orderInfo.id
        }).then(res => {
          uni.showToast({
            title: "加入公海成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/order/takeOrderList"
            })
          }, 1500)
        })
      },
      confirm() {
        console.log('点击确认按钮');
        reqApi.takeOrder({
          id: this.orderInfo.id
        }).then(res => {
          uni.showToast({
            title: "接单成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          let _this = this;
          uni.requestSubscribeMessage({
            tmplIds: ['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'],
            success(res) {
              console.log("是否授权", res);
              if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] ==
                "accept") { // 用户点击确定后
                _this.getDetail(_this.orderInfo.id);
              }
              if (res['pWp7CvYoml8PwPtkG-RR13Xbqt-buhQAvyshoWZHCsI'] ==
                "reject") { // 用户点击确定后
                uni.showToast({
                  title: "拒绝订阅消息",
                  icon: 'none',
                  mask: true,
                  duration: 1000,
                })
              }
            }
          })

        })
      },
      clickImg(url) {
        console.log("预览图片路径", url);
        // 预览图片
        uni.previewImage({
          urls: [url],
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log(data);
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
      },
      callPhone(phone) {
        uni.makePhoneCall({
          phoneNumber: phone, // 电话号码
          success: function() {
            console.log('拨号成功');
          },
          fail: function() {
            console.log('拨号失败');
          }
        });
      },
      copyText(text) {
        uni.setClipboardData({
          data: text,
          success: function() {
            uni.showToast({
              title: "复制成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .btn3 {
    display: flex;
    flex-direction: column;

    .transfer-icon {
      width: 41rpx;
      height: 44rpx;
    }

    .transfer-txt {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #1071E7;
    }
  }

  .hb-item-fr {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .tttx1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
    }

    .arrowIcon {
      width: 40rpx;
      height: 40rpx;
      margin-left: 15rpx;
    }

  }

  .activityInfo-warp {
    padding: 40rpx 0;
    box-sizing: border-box;

    .stepIcon {
      width: 60rpx;
      height: 60rpx;
    }

    .step-title {
      display: flex;
      align-items: center;

      .stepName {
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        margin-right: 20rpx;
      }

      .stepTime {
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: 400;
        font-size: 24rpx;
        color: #AAAAAA;
      }
    }

    .stepContent {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      margin: 20rpx 0;
    }

    .stepImgs {
      display: flex;
      flex-wrap: wrap;

      .img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .footer {
    padding: 40rpx;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;

    .btns {
      display: flex;
      justify-content: space-between;

      .btn1 {
        width: 184rpx;
        height: 84rpx;
        border-radius: 20rpx;
        border: 2rpx solid #CFE3FA;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #1071E7;
        text-align: center;
        line-height: 88rpx;
        margin-right: 20rpx;
      }

      .btn2 {
        width: 184rpx;
        height: 88rpx;
        background: linear-gradient(to top, #0992F5 0%, #1071E7 100%);
        border-radius: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn2 {
        flex: 1;
        height: 88rpx;
        background: linear-gradient(to top, #0992F5 0%, #1071E7 100%);
        border-radius: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 20rpx;
        }

        .txt {}
      }
    }
  }

  .containter {
    .warpper {
      padding: 20rpx;
      box-sizing: border-box;

      .block {
        padding: 0 30rpx;
        box-sizing: border-box;
        background: #fff;

        .ht {
          display: flex;
          justify-content: space-between;
          height: 100rpx;
          border-bottom: 2rpx solid #eee;
          align-items: center;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .edit {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #1071E7;
          }
        }

        .hb {
          margin-top: 20rpx;

          .hb-item {
            display: flex;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            margin-bottom: 20rpx;

            .label {
              // width: 150rpx;
              text-align: justify;
            }

            .value {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              align-items: center;

              .phoneNum {}

              .copyTxt {
                width: 28rpx;
                height: 28rpx;
                margin: 0 30rpx;
              }

              .phoneIcon {
                width: 28rpx;
                height: 28rpx;
              }
            }

            .images {
              .img-item {
                width: 120rpx;
                height: 120rpx;
                border-radius: 12rpx;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
              }
            }
          }
        }
      }
    }
  }
</style>